<template>
    <div class="city_body">
        <div class="city_list">
            <div class="city_hot">
                <h2>热门城市</h2>
                <ul class="clearfix">
                    <li v-for="item in hotList" :key="item.id">{{ item.nm }}</li>
                </ul>
            </div>
            <div class="city_sort" ref="city_sort">
                <div v-for="item in cityList" :key="item.index">
                    <h2>{{ item.index }}</h2>
                    <ul>
                        <li v-for="ins in item.list" :key="ins.id">{{ ins.nm }}</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="city_index">
            <ul>
                <li v-for="(item,ind) in cityList" @touchstart="touchstartCity(ind)">{{ item.index }}</li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "City",
        data(){
            return{
                cityList : [],
                hotList : []
            }
        },
        mounted() {
            this.axios.get('/api/cityList').then((result)=>{
                var msg = result.data.msg;
                if (msg==='ok'){
                    var cities = result.data.data.cities;
                    var city = this.formatCity(cities);
                    this.hotList = city.hotList;
                    this.cityList = city.cityList;
                }else {
                    alert("获取数据失败！")
                }
            })
        },
        methods:{
            formatCity: function (cities) {
                var cityList=[];
                var hotList=[];
                cities.forEach(item=>{
                    if (item.isHot===1) {
                        hotList.push({id:item.id,nm:item.nm,isHot:item.isHot});
                    }
                })
                cities.forEach(item => {
                    let initial = item.py.substring(0, 1).toUpperCase();
                    try{
                        isExist(initial);
                        cityList.push({index:initial,list:[{id:item.id,nm:item.nm,isHot:item.isHot}]})
                    }catch (e) {
                        cityList.forEach(v=>{
                            if (v.index===initial) {
                                v.list.push({id:item.id,nm:item.nm,isHot:item.isHot})
                            }
                        })
                    }
                })
                function isExist(initial) {
                    cityList.forEach(v=>{
                        if (v.index===initial){
                            throw "tt";
                        }
                    });
                }
                cityList.sort((n1,n2)=>{
                    if (n1.index>n2.index) {
                        return 1;
                    }else {
                        return -1;
                    }
                });
                return {
                    hotList:hotList,
                    cityList:cityList
                };
            },
            touchstartCity(index){
                var h2 = this.$refs.city_sort.getElementsByTagName('h2');
                //parentNode返回当前节点的父节点
                //scrollTop是指或返回被选中元素的垂直滚动位置
                //offsetTop  是指当前元素距离上方或上层控件的位置
                this.$refs.city_sort.parentNode.scrollTop = h2[index].offsetTop;
                //innerText获取当前标签的内容 innerHtml获取html
                //alert(h2[index].innerText);
                //this.$refs.city_List.toScrollTop(-h2[index].offsetTop);
            }
        }
    }
</script>

<style scoped>
    #content .city_body{ margin-top: 45px; display: flex; width:100%; position: absolute; top: 0; bottom: 0;}
    .city_body .city_list{ flex:1; overflow: auto; background: #FFF5F0;}
    .city_body .city_list::-webkit-scrollbar{
        background-color:transparent;
        width:0;
    }
    .city_body .city_hot{ margin-top: 20px;}
    .city_body .city_hot h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
    .city_body .city_hot ul{}
    .city_body .city_hot ul li{ float: left; background: #fff; width: 29%; height: 33px; margin-top: 15px; margin-left: 3%; padding: 0 4px; border: 1px solid #e6e6e6; border-radius: 3px; line-height: 33px; text-align: center; box-sizing: border-box;}
    .city_body .city_sort{}
    .city_body .city_sort div{ margin-top: 20px;}
    .city_body .city_sort h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
    .city_body .city_sort ul{ padding-left: 10px; margin-top: 10px;}
    .city_body .city_sort ul li{ line-height: 30px; line-height: 30px;}
    .city_body .city_index{ width:20px; display: flex; flex-direction:column; justify-content:center; text-align: center; border-left:1px #e6e6e6 solid;}

</style>